<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>filter</title>
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <script src="../bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../bower_components/angular/angular.min.js" type="text/javascript"></script>
</head>
<body ng-controller="myController" class="container">
<div class="panel panel-default">
    <div class="panel-header alert  alert-info">用过滤器进行搜索过滤</div>
    <div class="panel-body">
        <div class="panel-group">
            <div class="form-group col-lg-3">
                <label>任何属性都匹配:</label>
                <input type="text" ng-model="search.$"/>
            </div>
            <div class="form-group col-lg-3">
                <label>只匹配姓名:</label>
                <input type="text" ng-model="search.name"/>
            </div>
            <div class="form-group col-lg-3">
                <label>只匹配年龄:</label>
                <input type="number" ng-model="search.age"/>
            </div>
            <div class="form-group col-lg-3">
                <label>必须全部匹配对（严格匹配）:</label>
                <input type="checkbox" ng-model="strict"/>
            </div>
        </div>
        <table class="table">
            <thead>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="o in people | filter:search:true">
                <td>{{o.name}}</td>
                <td>{{o.age}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
<script>
    var app = angular.module('app', []);
    app.controller('myController', function ($scope) {
        $scope.people = [
            {"name": "薛煜帅", age: 2},
            {"name": "唱歌", age: 32}
        ];
    })
</script>
</html>